<template>
  <view class="component-container" @click="toggle()">
    <view class="text" :style="{ fontSize, color }">
      限商品现价+打包费+配送费上进行优惠使用，膨胀优惠券仅适用于参与了膨胀活动的商家，膨胀券可降为等价于未膨胀前的。
    </view>
    <view class="icon">
      <uni-icons custom-prefix="iconfont" type="icon-down" :size="fontSize" v-if="isFold"></uni-icons>
      <uni-icons custom-prefix="iconfont" type="icon-up" :size="fontSize" v-else></uni-icons>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  defaultFold: {
    type: Boolean,
    default: true
  },
  fontSize: {
    type: String,
    default: '23rpx'
  },
  color: {
    type: String,
    default: '#999'
  }
})

const isFold = ref(props.defaultFold)
function toggle() {
  isFold.value = !isFold.value
}
</script>

<style scoped lang="scss">
.component-container {
  display: flex;
  align-items: flex-start;
}
</style>
